<template>
	<view class="container">
		<NavBar title="安全动态监测详情"/>
		<scroll-view scroll-y class="list">
			<view class="info-list">
				<view class="info-item">
				  <text class="info-label">排查日期</text>
				  <text class="info-value">{{monitorDetail.checkDate}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label text-size">整改责任人</text>
				  <text class="info-value text-size">{{monitorDetail.changeName}}</text>
				</view>
				<view class="info-item">
				  <text class="info-label">联系方式</text>
				  <text class="info-value">{{monitorDetail.changeMobile}}</text>
				</view>
				<view class="info-item textarea">
				  <text class="info-label">隐患描述</text>
				  <!-- <text class="info-value">{{monitorDetail.dangerDesc}}</text> -->
				  <uv-textarea v-model="monitorDetail.dangerDesc" disabled  count placeholder="请输入隐患描述"></uv-textarea>
				</view>
				<view class="info-item">
				  <text class="info-label">等级</text>
				  <text class="info-value">{{monitorDetail.dangerLevel}}</text>
				</view>
				<view class="info-item textarea">
				  <text class="info-label">整改方法</text>
				  <!-- <text class="info-value">{{monitorDetail.changeMethod}}</text> -->
				  <uv-textarea v-model="monitorDetail.changeMethod" disabled  count placeholder="请输入隐患描述"></uv-textarea>
				</view>
				<view class="image-item">
				  <view class="info-label">整改前照片</view>
				  <view class="info-value image-item" v-if="monitorDetail.changeFrontImg">
				    <image 
				      class="imageFile" 
				  	v-for="(item,index) in monitorDetail.changeFrontImg.split(',')"  
				  	:src="item" 
				  	mode="heightFix"
				  	@click="previewImage(monitorDetail.changeFrontImg.split(','),index)"
				  	></image>
				  </view>
				</view>
				<view class="image-item" >
				  <view class="info-label">整改后照片</view>
				  <view class="info-value image-item" v-if="monitorDetail.changeAfterImg">
				    <image 
					
				      class="imageFile" 
				  	v-for="(item,index) in monitorDetail.changeAfterImg.split(',')"  
				  	:src="item" 
				  	mode="heightFix"
				  	@click="previewImage(monitorDetail.changeAfterImg.split(','),index)"
				  	></image>
				  </view>
				</view>
				<!-- <view class="image-item" >
				  <view class="info-label">整改后照片</view>
				  <view class="info-value image-item" v-if="monitorDetail.changeAfterImg">
				    <image 
					
				      class="imageFile" 
				  	v-for="(item,index) in monitorDetail.changeAfterImg.split(',')"  
				  	:src="item" 
				  	mode="heightFix"
				  	@click="previewImage(monitorDetail.changeAfterImg.split(','),index)"
				  	></image>
				  </view>
				</view> -->
				
				<view class="margin-bos">
					
					
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar/index.vue'
	import {
	    detailMonitor
	} from '@/utils/app.js'
	export default {
		components:{NavBar},
		data() {
			return {
				monitorDetail: {
				  id: '',
				  checkDate: '',
				  changeName: '',
				  changeMobile: '',
				  dangerDesc: '',
				  dangerLevel: '',
				  changeMethod: '',
				  changeDate: '',
				  changeFrontImg: '',
				  changeAfterImg: '',
				}
			};
		},
		onLoad(option) {
			this.getMonitorInfo(option.id)
			uni.showLoading({
				title: "加载中",
				mask: true
			});
		},
		methods:{
			previewImage(urls, current){
				uni.previewImage({
				  urls: urls,
				  current: urls[current]
				});
			},
			async getMonitorInfo(id){
				console.log(11);
				try {
					const res = await detailMonitor(id)
					this.monitorDetail=res.data
					uni.hideLoading();
				 } catch (error) {
					 uni.hideLoading();
					uni.showToast({
					   title: '服务繁忙',
					   icon: 'error'
					});
				 }
			}
		}
	}
</script>

<style lang="scss" scoped>
.list{
	height: calc(100vh - 180rpx);
	background-color: #fff;
	
	.info-list{
		padding: 0 30rpx;
		.info-item{
			display: flex;
			align-items: center;
			height: 112rpx;
			line-height: 112rxp;
			border-bottom: 1rpx solid #E7E7E7;
			
			.info-label{
				width: 162rpx !important;
				margin-right: 32rpx;
				color: rgba(0, 0, 0, 0.9);
			}
			.info-value{
				color: rgba(0, 0, 0, 0.85);
				.imageFile{
					height: 100rpx;
					margin-right: 10rpx;
				}
			}
		}
		.textarea{
			height: 200rpx;
		}
		.image-item{
			// flex: 1;
			flex-wrap: wrap;
			max-height: 200rpx;
		}
		.margin-bos{
			height: 1px;
		}
		
		.out {
			padding:4rpx 16rpx;
			font-size: 24rpx;
			color: #F53F3F;
		    background-color: #FFECE8;
			border-radius: 10rpx;
		}

		.in {
			padding:4rpx 16rpx;
			font-size: 24rpx;
		   background-color: #E8FFEA;
		   border-radius: 10rpx;
		}
		.image-item{
			display: flex;
			align-items: center;
			height: 112rpx;
			border-bottom: 1rpx solid #E7E7E7;
			.info-label{
				height: 112rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 162rpx !important;
				margin-right: 32rpx;
				color: rgba(0, 0, 0, 0.9);
			}
			.info-value{
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				.imageFile{
					height: 102rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	.action-buttons{
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		
		
		.action-btn{
			padding: 24rpx 32rpx;
			font-size: 15px;
			font-weight: normal;
			color: #F53F3F;
			background-color: #FFECE8;
			border-radius: 60rpx;
		}
		.fuel-btn{
			color: #165DFF;
			background-color: #E8F3FF;
			margin-right: 20rpx;
		}
	}
}
</style>
